<!DOCTYPE html>
<script src="../../../../resources/testharness.js"></script>
<script src="../../../../resources/testharnessreport.js"></script>
<script src="../../../../resources/gesture-util.js"></script>
<style type="text/css">
#touchtarget {
  background: white;
}

::-webkit-scrollbar {
  width: 0px;
  height: 0px;
}

#container {
  width: 200px;
  height: 200px;
  overflow-y: scroll;
  overflow-x: scroll;
  display: block;
}
</style>

<div id="container">
<iframe id="touchtarget" src="resources/scroll-inside-editable-iframe-promise-resolve-on-load.html"></iframe>
</div>

<script type="text/javascript">
var touchtarget = document.getElementById('touchtarget');
var expectedGesturesTotal = 2;
var gesturesOccurred = 0;
var scrollAmountX = [0, 0];
var scrollAmountY = [140, 200];
var scrollEventsOccurred = 0;
var expectedScrollEventsOccurred = 2;
var scrolledElement;

var x = 12;
var y = 150;
function firstGestureScroll() {
  return smoothScroll(140, x, y, GestureSourceType.TOUCH_INPUT, "down",
      SPEED_INSTANT);
}

function secondGestureScroll() {
  y = 110;
  return smoothScroll(60, x, y, GestureSourceType.TOUCH_INPUT, "down",
      SPEED_INSTANT);
}
    
promise_test (async () => {
  // Wait for the iframe to be ready before starting the test.
  await iframeOnLoadPromise;
  touchtarget.contentDocument.addEventListener("scroll", recordScroll);
  scrolledElement = touchtarget.contentDocument.scrollingElement;

  await firstGestureScroll();
  await waitFor(checkScrollOffset);
  await secondGestureScroll();
  await waitFor(checkScrollOffset);
}, 'This tests gesture event scrolling of an iframe in an overflow div. ' +
    'Red-green strip is scrolled on pass.');
</script>
